// 图片切换功能
const thumbnails = document.querySelectorAll('.thumbnail');
const mainImage = document.getElementById('mainImage');

thumbnails.forEach(thumbnail => {
    thumbnail.addEventListener('click', () => {
        // 移除所有缩略图的选中状态
        thumbnails.forEach(thumb => thumb.classList.remove('active'));
        // 添加当前缩略图的选中状态
        thumbnail.classList.add('active');
        // 更新主图
        mainImage.src = thumbnail.dataset.img;
        mainImage.alt = thumbnail.alt;
    });
});

// 数量选择功能
const decreaseBtn = document.getElementById('decreaseBtn');
const increaseBtn = document.getElementById('increaseBtn');
const quantityInput = document.getElementById('quantity');

decreaseBtn.addEventListener('click', () => {
    const currentValue = parseInt(quantityInput.value);
    if (currentValue > 1) {
        quantityInput.value = currentValue - 1;
    }
});

increaseBtn.addEventListener('click', () => {
    const currentValue = parseInt(quantityInput.value);
    quantityInput.value = currentValue + 1;
});

// 属性选择功能
const colorOptions = document.querySelectorAll('[data-color]');
const versionOptions = document.querySelectorAll('[data-version]');

colorOptions.forEach(option => {
    option.addEventListener('click', () => {
        colorOptions.forEach(opt => opt.classList.remove('selected'));
        option.classList.add('selected');
    });
});

versionOptions.forEach(option => {
    option.addEventListener('click', () => {
        versionOptions.forEach(opt => opt.classList.remove('selected'));
        option.classList.add('selected');
    });
});

// 加入购物车功能
const addToCartBtn = document.getElementById('addToCartBtn');
const cartNotification = document.getElementById('cartNotification');

addToCartBtn.addEventListener('click', () => {
    // 获取选中的属性
    const selectedColor = document.querySelector('[data-color].selected').dataset.color;
    const selectedVersion = document.querySelector('[data-version].selected').dataset.version;
    const quantity = parseInt(quantityInput.value);

    // 在实际应用中，这里会发送AJAX请求到后端添加商品到购物车
    // 这里仅作模拟
    console.log(`添加到购物车: 颜色=${selectedColor}, 版本=${selectedVersion}, 数量=${quantity}`);

    // 显示通知
    cartNotification.classList.add('show');

    // 3秒后隐藏通知
    setTimeout(() => {
        cartNotification.classList.remove('show');
    }, 3000);
});